<template>
	<view class="unio2o-page-has-bg">
		<view class="unio2o-jb-bg"></view>
		<view class="pd30 unio2o-main">
			
			<view @click="showAlert = true" class="box-shadow bdr16 pd30 bg-w flex alcenter space">
				<view>
					<view>
						<text class="tag-ztd flex center alcenter mr10">自提点</text>
					    <text class="ft16 text-default ftw600">合肥市蜀山区望江西路55号华润五彩国际903室</text>
					</view>
					<view class="flex space alcenter mt30">
						<text class="ft14 text-main">商家 | 张先生 13515608638</text>
						<text class="ft14 text-theme ftw600">1.2km</text>
					</view>
				</view>
				<view class="iconfont iconbtn_arrowr text-default ml20"></view>
			</view>
			
			<view class="box-shadow bdr16 pd30 bg-w mt40">
				<view class="flex">
					<view class="wh80">
						<image class="wh80 bdr16" :src="''"></image>
					</view>
					<view class="pl20 ws80">
						<view class="ft16 text-default">
							男神女神分享餐，建议2人使…
						</view>
						<view class="flex space alcenter ft14 text-notice mt20">
							<view><text>已兑:</text><text class="ml10">10</text></view>
							<view><text>剩余:</text><text class="ml10">10</text></view>
						</view>
						<view class="mt20 flex alcenter">
							<image class="wh20" :src="'icon_diamond'"></image>
							<text class="ft16 ftw600 text-theme ml10">1000</text>
							<text class="ml20 text-line ft14 text-notice">￥100</text>
						</view>
					</view>
				</view>
				<view class="line mt40 mb40 opacity5"></view>
				<view class="flex space alcenter">
					<text class="ft16 ftw600 text-info">兑换数量</text>
					<view class="flex alcenter">
						<view class="iconfont iconbtn_subtract text-notice ft40"></view>
						<text class="ml30 mr30 ft16 ftw500 text-default">1</text>
						<view class="iconfont iconbtn_add text-theme ft40"></view>
					</view>
				</view>
			</view>
			
			
			<view class="box-shadow pd30 bg-w bdr16 mt40">
				<view class="flex alcenter space">
					<view class="ft16 ftw600 text-info">积分扣除</view>
					<view class="text-theme">
						<text class="ft16 ftw600">400积分</text>
					</view>
				</view>	
				<view class="line mt40 mb40"></view>
				<view class="flex alcenter space">
					<view class="ft16 ftw600 text-info">应付金额</view>
					<view class="text-theme">
						<text class="ft16 ftw600">￥0</text>
					</view>
				</view>	
			</view>
			
			
			<view class="mt50">
				<button class="btn-main ft18 text-w ftw600">确认兑换</button>
				<view class="mt20 text-notice ft12 text-center">
					此商品过期自动退款，支付金额退款至余额，积分原路退还
				</view>
			</view>
		</view>
		
		<unio2o-model title="选择自提点" :show="showAlert" @closed="showAlert = false">
			
			<view class="pd30" style="max-height: 1200rpx; overflow-y: scroll;">
				<view class="ft16 text-info">当前自提点</view>
				<view class="box-shadow bdr16 pd30 mt30">
					<view class="ft16 text-default ftw600">
						合肥市蜀山区望江西路55号华润五彩国际903室
					</view>
					<view class="flex space alcenter mt30">
						<text class="ft14 text-main">商家 | 张先生 13515608638</text>
						<text class="ft14 text-theme ftw600">1.2km</text>
					</view>
				</view>
				<view class="ft16 mt30 text-info">附近的自提点</view>
				<view class="box-shadow bdr16 pd30 mt30">
					<view class="ft16 text-default ftw600">
						合肥市蜀山区望江西路55号华润五彩国际903室
					</view>
					<view class="flex space alcenter mt30">
						<text class="ft14 text-main">商家 | 张先生 13515608638</text>
						<text class="ft14 text-theme ftw600">1.2km</text>
					</view>
				</view>
				
				<view class="box-shadow bdr16 pd30 mt30">
					<view class="ft16 text-default ftw600">
						合肥市蜀山区望江西路55号华润五彩国际903室
					</view>
					<view class="flex space alcenter mt30">
						<text class="ft14 text-main">商家 | 张先生 13515608638</text>
						<text class="ft14 text-theme ftw600">1.2km</text>
					</view>
				</view>
				
			</view>
			
		</unio2o-model>
	</view>
</template>

<script>
	import unio2oModel from '@/components/base/modal/modal.vue';
	export default{
		components:{
			unio2oModel
		},
		data(){
			return {
				showAlert:false
			}
		}
	}
</script>

<style>
	.tag-ztd{
		font-size: 24rpx;
		color:#FFFFFF;
		width:96rpx;
		height:36rpx;
		background:#FF6D00;
		border-radius:18rpx 18rpx 18rpx 0rpx;
		display: inline-flex;
		line-height: 36rpx;
	}
</style>